import { WeekDayEnum } from '@/config/enum';
import { unset } from 'lodash';
import moment from 'moment';
import { useState, useEffect } from 'react';
import { getWeatherForDay, getRealTimeWeather, getWeatherForHour } from './api';
import styles from './styles.module.less'
const Content = () => {
  const [data, setData] = useState<any>({});
  const [day7, setDay7] = useState<any[]>([]);
  const [hours24, setHours24] = useState<any[]>([]);

  const getData = async () => {
    try {
      const hour = await getWeatherForHour();
      setHours24(hour.hourly)
      const day = await getWeatherForDay(7);
      setDay7(day.daily)
      const res = await getRealTimeWeather();
      setData(res.now)
    } catch (error) {
    }
  }

  const night = Number(moment().format('HH'))

  useEffect(() => {
    getData()
  }, [])

  return (
    <div className={styles.Content}>
      {/* 今日天气 */}
      <div className='flex px-5 gap-5'>
        <div className='appNearBg rounded-lg flex justify-center items-center font-bold px-20 max-sm:px-10'>
          <div>
            <span className='text-4xl'>
              {data?.temp ?? '0'}
            </span>
            <span className='text-2xl'>
              ℃
            </span>
          </div>

        </div>
        {/* 天气基本信息 */}
        <div className='flex-1 flex flex-col justify-center gap-2'>
          <div className='flex gap-5'>
            <span>
              {data?.text ?? '天气状况'}
            </span>
            <span>
              {day7?.[0]?.tempMax ?? '最高温度'}/
              {day7?.[0]?.tempMin ?? '最低温度'}
            </span>
            <i className={`qi-${data?.icon}`}></i>
          </div>
          <div className='flex gap-5 max-sm:flex-col max-sm:gap-0'>
            <div>
              <span>
                {data?.windDir ?? '风向'}
              </span>
              <span className='mr-2'>:</span>
              <span>
                {data?.windScale ?? '0'}级
              </span>
            </div>
            <div>
              <span>
                风速
              </span>
              <span className='mr-2'>:</span>
              <span>
                {data?.windSpeed ?? '--'} 公里/每小时
              </span>
            </div>
            <div>
              <span>
                相对湿度
              </span>
              <span className='mr-2'>:</span>
              <span>
                {data?.humidity ?? '--'} %
              </span>
            </div>
            <div>
              <span>
                大气压强
              </span>
              <span className='mr-2'>:</span>
              <span>
                {data?.pressure ?? '--'} hPa
              </span>
            </div>
          </div>
        </div>
      </div>
      {/* 二十四小时预报 */}
      <div className='px-5 flex flex-col gap-3 overflow-hidden'>
        <h5>二十四小时预报</h5>
        <div className='flex-1 w-full overflow-x-scroll overflow-y-hidden'>
          <ol className='flex gap-2 h-full' >
            {hours24?.map((hour, index) => {
              return (
                <li className='flex flex-col justify-around items-center p-3 appNearBg rounded-lg ' key={index}>
                  <div>
                    <i className={`qi-${hour?.icon}`}></i>
                  </div >
                  <div className='text-sm'>
                    {hour?.temp}℃
                  </div>
                  <div className='text-sm'>
                    {moment(hour?.fxTime).format('HH:mm')}
                  </div>
                </li>
              )
            })}
          </ol>
        </div>
      </div>
      {/* 未来七天预报 */}
      <div className='px-5 flex flex-col gap-3 overflow-hidden'>
        <h5>未来七天预报</h5>
        <ol className='flex-1 flex gap-4 justify-between max-md:overflow-auto'>
          {day7?.map((day, index) => {
            return (
              <li className='flex-1 flex flex-col justify-around items-center px-3 appNearBg rounded-lg' key={index}>
                <div>
                  <i className={`qi-${day?.iconDay}`}></i>
                </div>
                <div className='text-sm'>
                  {day?.tempMax ?? '最高温度'}/
                  {day?.tempMin ?? '最低温度'}
                </div>
                <div className='text-sm flex gap-1 max-sm:flex-col max-sm:items-center flex-nowrap'>
                  <div className='flex-1'>
                    {moment(day?.fxDate).format('MM:DD')}
                  </div>
                  <div className='flex-1'>
                    {WeekDayEnum[moment(day?.fxDate).weekday()]}
                  </div>
                </div>
              </li>
            )
          })}
        </ol>
      </div>
    </div>
  )
}
export default Content